<template>
  <div>
    <!-- 关闭图标 -->
    <router-link to="/" slot="left" class="close"
      ><img src="http://qxkmdhmin.hn-bkt.clouddn.com/guanbi.png"
    /></router-link>
    <div class="container">
      <!-- 头像 -->
      <div class="head_portrait">
        <img src="../assets/1.jpg" alt="" />
      </div>
      <!-- 文本 -->
      <p>分享的人是厨房里的天使</p>
    </div>
    <div class="upload">
      <ul>
        <li>
          <div class="img">
            <img src="http://qxkmdhmin.hn-bkt.clouddn.com/caipu.png" alt="" />
          </div>
          <p>传菜谱</p>
        </li>
        <li @click="upwork">
          <div class="img">
            <img src="http://qxkmdhmin.hn-bkt.clouddn.com/tupian.png" alt="" />
          </div>
          <p>传作品</p>
        </li>
        <li>
          <div class="img">
            <img src="http://qxkmdhmin.hn-bkt.clouddn.com/video.png" alt="" />
          </div>
          <p>传视频</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

     }
  },
  methods:{
     upwork(){
       this.$router.push('/uploadworks');
     }
  }  
}
</script>


<style lang="scss" scoped>
.close {
  position: absolute;
  left: 16px;
  top: 10px;
}
.container {
  text-align: center;
  color: #c2c2c2;
  .head_portrait {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 20px;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.gird {
  text-align: center;
}
.upload {
  position: absolute;
  bottom: 80px;
  li {
    display: block;
    float: left;
    font-size: 14px;
    text-align: center;
    margin-left: 46px;
  }
  .img {
    position: relative;
    background: #33ccff;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
    img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  }
}
ul li:nth-child(2) .img {
  background: #cc3300;
}
ul li:nth-child(3) .img {
  background: #ff6600;
}
</style>